<!--账户列表-->
<template>
  <div class="ele-body" style="padding-bottom: 71px">
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="74px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card>
        <div class="flex-align-center keyword-top">
          <div class="keyword-title">账号列表</div>
          <div class="flex-align-center border">
            <div v-for="(i,j) in typeList" :key="j" @click="typeClick(i.id)">
              <div :class="form.type == typeList[j].id ? 'select-type' : 'no-select-type'" class="flex default">{{i.name}}</div>
            </div>
          </div>
        </div>
        <el-row :gutter="15" class="flex-align-center m-bottom20">
          <el-col :xs="12" :sm="12" :lg="5" :xl="5">
            <el-form-item label="账号分组" style="margin-bottom: 0">
              <el-select
                v-model="groupName"
                placeholder="请选择账号分组"
                class="ele-block"
                clearable
                @change="selectVideo"
              >
                <el-option :label="i.groupName" :value="i" v-for="(i,j) in groupList" :key="j" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="5" :xl="5">
            <el-form-item label="授权状态" style="margin-bottom: 0">
              <el-select
                v-model="form.authStatus"
                placeholder="请选择"
                class="ele-block"
                clearable
                @clear="see()"
              >
                <!--0失效1正常-->
                <el-option label="失效" :value="1" />
                <el-option label="正常" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="5" :xl="5">
          <el-form-item label="到期时间" style="margin-bottom: 0">
            <el-date-picker
              v-model="datetime"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd "
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="ele-fluid"
              @change="select"
            />
          </el-form-item>
          </el-col>

          <el-col :xs="19" :sm="19" :lg="9" :xl="9" style="padding-left:40px;">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
        <excel-export ref="table" :accountForm="form" @load="see" />
      </el-card>
    </el-form>
  </div>
</template>

<script>
  import ExcelExport from './components/excel-export.vue';
  import {accountQuery} from "@/api/matrixManage/accountList";
  import {queryGroup} from "@/api/matrixManage/groupManage";
  export default {
    name: "index",
    components: { ExcelExport },
    data() {
      return {
        groupName:'',//账号分组展示
        datetime:[],
        accounts:[],
        // 省市
        provinceCity:'',
        //1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手
        typeList:[
          {name:'D音H5发布',id:1},
          {name:'K手发布',id:4}
        ],
        // 表单提交状态
        loading: false,
        // 表单数据
        form: {
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
          type:1
        },

        initInfo:{
          username:this.$store.state.user.info.username,
          limit:10,
          page:1
        },
        groupList:[]
      }
    },
    activated(){
      this.init()
    },
    created(){
      // 查询矩阵账号【分页查询】
      this.query()
      this.initType()
    },
    methods:{
      selectVideo(e){
        console.log("e-----",e)
        this.form.groupId=e.id
        this.groupName=e.groupName
      },
      // 1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手  分组动态新增
      initType(){
        let info = localStorage.getItem('indexData') ? JSON.parse(localStorage.getItem('indexData')) : {};
        console.log("info=======",info)
        //（1.开启 2.发布）
        if(info && info.toCookieReleased==1){
          let item={name:'D音cookie',id:2}
          this.typeList.splice(1, 0, item);
          // this.checkList.push('D音H5任务发布')
          console.log('D音cookie发布this.form333========')
        }
        if(info && info.toBeReleased==1){
          let item={name:'代发布到D音',id:3}
          this.typeList.splice(1, 0, item);
          // this.checkList.push('代员工发布到D音')
          console.log("代员工发布到D音333")
        }
      },
      // 初始化分组
      init(){
        if(!this.initInfo.groupName){
          delete this.initInfo.groupName
        }
        this.initInfo.groupType = this.form.type
        queryGroup(this.initInfo)
          .then((data) => {
            this.groupList=data.list
            console.log(' this.groupList--', this.groupList)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      // K手/视频号，切换类型
      typeClick(index){
        this.$set(this.form,'type',index)
        console.log('this.form.type', this.form.type)
        this.form.isQuery=false
        this.query()
        // 清空账号分组且刷新接口
        this.form.groupId=''
        this.groupName=''
        this.init()
      },
      select(e){
        console.log("日期选择e============",e,'form.datetime',this.datetime)
        if(this.datetime){
          Object.assign( this.form, {
            startTime:  this.datetime[0],
            endTime:  this.datetime[1]
          })
        }
      },
      // 查询
      see(){
        this.form.isQuery=true
        if(this.form.authStatus=='' && this.form.authStatus!=0){
          delete this.form.authStatus
        }
        if(!this.form.groupId){
          delete this.form.groupId
        }
        if(!this.datetime){
          this.datetime=''
          delete this.form.startTime
          delete this.form.endTime
        }
        this.query()
      },
      // 重置
      resetting(){
        // this.form.type=1 //重置‘抖音/快手’分类
        this.form.authStatus=''
        this.form.groupId=''
        this.groupName=''
        delete this.form.authStatus
        delete this.form.groupId
        this.datetime=''
        delete this.form.startTime
        delete this.form.endTime
        this.query()
      },
      // 查询矩阵账号【分页查询】
      query(){
        this.$nextTick(()=>{
          console.log(' this.$refs[\'table\']', this.$refs['table'])
          console.log('this.form.typ222e',this.form.type)
          this.$refs['table'].showType(this.form.type)
          this.$refs['table'].reload()
          console.log('this.form.type3433',this.form.type)
        })
      },
    }
    }
</script>

<style scoped lang="less">
  .keyword-top{
    padding:4px 4px 20px;
    .keyword-title{
      font-size: 20px;
      line-height: 24px;
      margin-right: 20px;
      color: #000000;
    }
    .border{
      border-radius: 5px;
      overflow: hidden;
      .no-select-type,.select-type{
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 60px;
        padding: 0 5px;
        height: 29px;
      }
      .select-type{
        background: #1E6CEB;
        color: #FFFFFF;
      }
      .no-select-type{
        border: 1px solid #F5F5F5;
        color: #ABAFB5;
      }
    }

  }
  .resetting-btn{
    background: #F5F5F5;
  }

</style>
